fix: layout scale to handle downscale correctly#7109
Conversation
dosubot
bot
added
the
size:S
📝 WalkthroughWalkthroughRefactored layout scaling calculations in the Vue node layout module to simplify Y-coordinate positioning. Consolidated height adjustment logic and unified relativeY derivation by removing intermediate title-height adjustments, deriving all Y positions directly as oldY - originY, and applying the simplified scaledY consistently across node, group, and reroute updates. Changes
Possibly related PRs
✨ Finishing touches
🧪 Generate unit tests (beta)
Comment |
🎭 Playwright Test Results⏰ Completed at: 12/03/2025, 12:43:42 AM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 12/03/2025, 12:35:21 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.19 MB (baseline 3.19 MB) • 🟢 -264 BMain entry bundles and manifests
Status: 3 added / 3 removed Graph Workspace — 929 kB (baseline 929 kB) • ⚪ 0 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 6.54 kB (baseline 6.54 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 1 added / 1 removed Panels & Settings — 298 kB (baseline 298 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 6 added / 6 removed UI Components — 169 kB (baseline 169 kB) • ⚪ 0 BReusable component library chunks
Status: 6 added / 6 removed Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 BStores, services, APIs, and repositories
Status: 2 added / 2 removed Utilities & Hooks — 2.94 kB (baseline 2.94 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 1 added / 1 removed Vendor & Third-Party — 8.56 MB (baseline 8.56 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 3.84 MB (baseline 3.84 MB) • ⚪ 0 BBundles that do not match a named category
Status: 17 added / 17 removed |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts (1)
60-90: Verify NODE_TITLE_HEIGHT-based height math covers all node shapesThe updated scaling logic for nodes:
- Uses
relativeY = oldY - originYandscaledYfor position, which is affine and symmetric withscaleFactor/1 / scaleFactor, so Y positions should no longer drift when toggling between up/down scale.- Adjusts height as:
const scaledHeight = needsUpscale ? lgNode.size[1] * scaleFactor + LiteGraph.NODE_TITLE_HEIGHT : (lgNode.size[1] - LiteGraph.NODE_TITLE_HEIGHT) * scaleFactorThis is mathematically reversible (upscale then downscale, or vice versa) if Vue-mode heights satisfy
H_vue = H_lg * SCALE_FACTOR + NODE_TITLE_HEIGHT, which matches the intent to fix cumulative drift.One edge case: if any
lgNode.size[1]can be ≤LiteGraph.NODE_TITLE_HEIGHTin real graphs (e.g. custom plugin nodes with very small heights), the downscale branch would produce zero or negative heights. If that's possible, consider guarding via a non-negative content height:const baseHeight = lgNode.size[1] - LiteGraph.NODE_TITLE_HEIGHT const scaledHeight = needsUpscale ? lgNode.size[1] * scaleFactor + LiteGraph.NODE_TITLE_HEIGHT : Math.max(baseHeight, 0) * scaleFactorIf all node implementations guarantee
size[1] > NODE_TITLE_HEIGHT, then the current code is fine as-is.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts(4 hunks)
🧰 Additional context used
📓 Path-based instructions (11)
**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
**/*.{vue,ts,tsx}: Leverage VueUse functions for performance-enhancing utilities
Use vue-i18n in Composition API for any string literals and place new translation entries in src/locales/en/main.json
Files:
src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts
**/*.{ts,tsx,js}
📄 CodeRabbit inference engine (.cursorrules)
Use es-toolkit for utility functions
Files:
src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursorrules)
Use TypeScript for type safety
**/*.{ts,tsx}: Never useanytype - use proper TypeScript types
Never useas anytype assertions - fix the underlying type issue
Files:
src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts
**/*.{ts,tsx,js,vue}
📄 CodeRabbit inference engine (.cursorrules)
Implement proper error handling in components and services
**/*.{ts,tsx,js,vue}: Use 2-space indentation, single quotes, no semicolons, and maintain 80-character line width as configured in.prettierrc
Organize imports by sorting and grouping by plugin, and runpnpm formatbefore committing
Files:
src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts
src/**/*.{vue,ts}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.{vue,ts}: Leverage VueUse functions for performance-enhancing styles
Implement proper error handling
Use vue-i18n in composition API for any string literals. Place new translation entries in src/locales/en/main.json
Files:
src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts
src/**/*.ts
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
src/**/*.ts: Use es-toolkit for utility functions
Use TypeScript for type safety
Files:
src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts
**/*.{ts,tsx,js,jsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
Use camelCase for variable and setting names in TypeScript/Vue files
Files:
src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts
**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx,vue}: Useconst settingStore = useSettingStore()andsettingStore.get('Comfy.SomeSetting')to retrieve settings in TypeScript/Vue files
Useawait settingStore.set('Comfy.SomeSetting', newValue)to update settings in TypeScript/Vue files
Check server capabilities usingapi.serverSupportsFeature('feature_name')before using enhanced features
Useapi.getServerFeature('config_name', defaultValue)to retrieve server feature configurationEnforce ESLint rules for Vue + TypeScript including: no floating promises, no unused imports, and i18n raw text restrictions in templates
Files:
src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts
**/*.ts
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.ts: Define dynamic setting defaults using runtime context with functions in settings configuration
UsedefaultsByInstallVersionproperty for gradual feature rollout based on version in settings configuration
Files:
src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts
src/**/*.{ts,tsx,vue}
📄 CodeRabbit inference engine (src/CLAUDE.md)
src/**/*.{ts,tsx,vue}: Sanitize HTML with DOMPurify to prevent XSS attacks
Avoid using @ts-expect-error; use proper TypeScript types instead
Use es-toolkit for utility functions instead of other utility libraries
Implement proper TypeScript types throughout the codebase
Files:
src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts
src/**/*.{vue,ts,tsx}
📄 CodeRabbit inference engine (src/CLAUDE.md)
Follow Vue 3 composition API style guide
Files:
src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts
🧠 Learnings (12)
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : Do not replace `&&=` or `||=` with `=` when there is no reason to do so. If you do find a reason to remove either `&&=` or `||=`, leave a comment explaining why the removal occurred
Applied to files:
src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : Use provided test helpers `createTestSubgraph` and `createTestSubgraphNode` from `./fixtures/subgraphHelpers` for consistent subgraph test setup
Applied to files:
src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts
📚 Learning: 2025-11-24T19:46:52.279Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-24T19:46:52.279Z
Learning: Applies to **/*.{vue,ts,tsx} : Leverage VueUse functions for performance-enhancing utilities
Applied to files:
src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{test,spec}.{ts,tsx} : When writing tests for subgraph-related code, always import from the barrel export at `@/lib/litegraph/src/litegraph` to avoid circular dependency issues
Applied to files:
src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts
📚 Learning: 2025-11-24T19:47:14.779Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:14.779Z
Learning: Applies to **/*.{ts,tsx,vue} : Use `const settingStore = useSettingStore()` and `settingStore.get('Comfy.SomeSetting')` to retrieve settings in TypeScript/Vue files
Applied to files:
src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts
📚 Learning: 2025-11-24T19:47:02.860Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-24T19:47:02.860Z
Learning: Applies to src/**/*.{vue,ts} : Leverage VueUse functions for performance-enhancing styles
Applied to files:
src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : Take advantage of `TypedArray` `subarray` when appropriate
Applied to files:
src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : The `size` and `pos` properties of `Rectangle` share the same array buffer (`subarray`); they may be used to set the rectangle's size and position
Applied to files:
src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{ts,tsx} : Type assertions are an absolute last resort. In almost all cases, they are a crutch that leads to brittle code
Applied to files:
src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : Prefer single line `if` syntax over adding curly braces, when the statement has a very concise expression and concise, single line statement
Applied to files:
src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : Run ESLint instead of manually figuring out whitespace fixes or other trivial style concerns using the `pnpm lint:fix` command
Applied to files:
src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : When writing methods, prefer returning idiomatic JavaScript `undefined` over `null`
Applied to files:
src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts
🧬 Code graph analysis (1)
src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts (1)
src/lib/litegraph/src/litegraph.ts (1)
LiteGraph(17-17)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: deploy-and-comment
- GitHub Check: setup
- GitHub Check: lint-and-format
- GitHub Check: test
- GitHub Check: collect
🔇 Additional comments (2)
src/renderer/extensions/vueNodes/layout/ensureCorrectLayoutScale.ts (2)
11-11: LiteGraph import for NODE_TITLE_HEIGHT is appropriateImporting
LiteGraphhere to accessLiteGraph.NODE_TITLE_HEIGHTkeeps the height math tied to the canonical LiteGraph constant and avoids magic numbers; looks good.
147-158: Consistent group Y scaling with node/reroute logicUsing
relativeY = oldY - originYfor groups and assigninggroup.pos = [scaledX, scaledY]aligns group movement with nodes and reroutes around the same origin, which should help avoid visual drift of groups relative to their contents when switching renderers.
christian-byrne
added
needs-backport
## Summary Fixes drift when switching between modes introduced after #6966 ## Changes - **What**: ensureCorrectLayoutScale ## Screenshots (if applicable) https://github.com/user-attachments/assets/e40803f1-8ae5-4890-bc1a-3f2413a35c7d https://www.notion.so/Bug-Spamming-Nodes-2-0-button-causes-nodes-to-grow-longer-2bd6d73d3650818492a4e0cc53da7017 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7109-fix-layout-scale-to-handle-downscale-correctly-2be6d73d365081c29fe2c481feafebc1) by [Unito](https://www.unito.io)
|
@simula-r Backport branch created but PR creation failed for |
github-actions
bot
removed
needs-backport
…7245) Backport of #7109 to `core/1.33` Automatically created by backport workflow. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7245-backport-core-1-33-fix-layout-scale-to-handle-downscale-correctly-2c36d73d365081b5a4cbd6e1215aa92e) by [Unito](https://www.unito.io) Co-authored-by: Simula_r <18093452+simula-r@users.noreply.github.com>
## Summary Fixes drift when switching between modes introduced after #6966 ## Changes - **What**: ensureCorrectLayoutScale ## Screenshots (if applicable) https://github.com/user-attachments/assets/e40803f1-8ae5-4890-bc1a-3f2413a35c7d https://www.notion.so/Bug-Spamming-Nodes-2-0-button-causes-nodes-to-grow-longer-2bd6d73d3650818492a4e0cc53da7017 ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7109-fix-layout-scale-to-handle-downscale-correctly-2be6d73d365081c29fe2c481feafebc1) by [Unito](https://www.unito.io)
4 participants
Summary
Fixes drift when switching between modes introduced after #6966
Changes
Screenshots (if applicable)
chrome_TKEzo6twFR.mp4
https://www.notion.so/Bug-Spamming-Nodes-2-0-button-causes-nodes-to-grow-longer-2bd6d73d3650818492a4e0cc53da7017
┆Issue is synchronized with this Notion page by Unito